<template>
  <div>
    <h1>商品分页</h1>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column prop="proid" label="Date" width="200" />
      <el-table-column label="图片" width="100">
        <template #default="scope">
          <img class="img" :src="scope.row.img1" />
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="名称" width="250" />
      <el-table-column prop="brand" label="品牌" width="160" />
      <el-table-column prop="originprice" label="价格" width="80" />
      <el-table-column prop="discount" label="折扣" width="80" />
      <el-table-column prop="sales" label="销量" width="100" />
      <el-table-column prop="stock" label="库存" width="100" />
      <el-table-column label="是否推荐">
        <template #default="scope">
          <el-switch v-model="scope.row.isrecommend" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="total" :page-size="params.limitNum" @current-change="changePage" background layout="prev, pager, next"  />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import service from "../../../utils/service"


//定义查询的结果（表格里的数据）
interface IGoods{
    brand:string,
    category:string,
    desc:string,
    discount:string,
    img1:string,
    isrecommend:string,
    issale:string,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}

const list = reactive<IGoods[]>([])

const loading = ref(true)

const params = reactive<{
    count:number,
    limitNum:number
}>({
    count:1,
    limitNum:12
})

const total = ref(0)

const searchFn = () =>{
    service({
        url:"pro/list",
        params:params
    }).then(res=>{
        if(res.data.code === "200"){
          loading.value = false
            total.value = res.data.total
            list.length = 0
            list.push(...res.data.data)
        }
    })
}
searchFn()

const changePage = (value:number)=>{
    console.log("value",value);
    params.count = value
    searchFn()
}

</script>

<style scoped>
.img {
    width: 100px;
    height: 75px;
}
</style>